<!DOCTYPE html>
<html>
	<head>
		<title>latebinding</title>
		<link type="text/css" href="../../../../dojo/resources/dojo.css" />
		<link type="text/css" href="../../../../dijit/themes/claro/claro.css" />
		<script src="../../../../dojo/dojo.js"></script>
		<script>
			var model;
			require([
				'dojo/_base/declare',
				'dojox/mvc',
				'dojox/mvc/Group',
				'dijit/_TemplatedMixin',
				'dijit/_WidgetsInTemplateMixin',
				'dojox/mvc/StatefulModel',
				'dojo/ready',
				'dojo/parser',
				'dijit/form/TextBox'
			], function (declare, mvc, Group, _TemplatedMixin, _WidgetsInTemplateMixin, StatefulModel, ready, parser, TextBox) {
				declare('test.TextBox', [TextBox], {
					startup: function () {
						console.log('starting...', this.id, this.binding);
						this.inherited(arguments);
						console.log('started', this.id, this.binding);
					}
				});
				var testGroup = declare('test.Group', [Group], {
					startup: function () {
						console.log('starting...', this.id, this.binding);
						this.inherited(arguments);
						console.log('started', this.id, this.binding);
					}
				});
				declare('test.Templated', [testGroup, _TemplatedMixin, _WidgetsInTemplateMixin], {
					templateString: '<div><input data-dojo-type="test.TextBox" data-dojo-props="ref: \'rel:fn\'"></div>'
				});

				model = new StatefulModel({ data: {fn: 'first', ln: 'last'}});
				ready(function () {
					parser.parse();
					console.log('setting ref after parsing...');
					dijit.byId('late').set('ref', model);
					var prog = new test.Templated({
						ref: model
					}, 'prog');
					prog.startup();
				});
			});
		</script>
	</head>

	<body class="claro">
		<h1>latebinding</h1>
		<p>no template</p>
		<div id="parsedGroup" data-dojo-type="test.Group" data-dojo-props="ref:model">
			<input data-dojo-type="test.TextBox" data-dojo-props="ref: 'rel:fn'" id="parsedInput">
		</div>
		<p>Early parsed</p><div id="early" data-dojo-type="test.Templated" ref="model"></div>
		<p>Late parsed</p><div id="late" data-dojo-type="test.Templated"></div>
		<p>programmatic</p><div id="prog"></div>
	</body>
</html>
